{% extends "base.html" %}
{% import "components/input.html" as input %}
{% import "components/output.html" as output %}
{% import "components/token_info_table.html" as token_info_table %}
{% block body_classes %}overflow-y-scroll{% endblock %}
{% block content %}
    <div class="page_ctn">
        <div class="ui container">
            <div class="ui grid">
                <div class="tx-header__container ten wide column">
                    <h1 class="tx-header__title">{{ title }}</h1>
                    {% if tx.is_coinbase %}
                        <div class="tx-header__label ui green label">Coinbase</div>
                    {% endif %}
                    {% if tx.is_final %}
                        <div class="finalized-indicator">
                            Finalized
                            <img class="final-icon"
                                 src="/assets/checkmark.svg"
                                 alt="Finalized by Avalanche" />
                        </div>
                    {% else %}
                        <div class="finalizing-indicator">Finalizing...</div>
                    {% endif %}
                </div>
                <div class="six wide column">
                    <div class="toggle-wrapper">
                        <button type="button" class="toggle_btn" id="toggle-advanced">
                            <span id="showhash"></span>
                        </button>
                        Advanced
                    </div>
                </div>
            </div>
            <div id="tx-hash" class="ui segment">
                <table class="top-section__hash-table ui very basic table">
                    <tbody>
                        {% if is_token %}
                            <tr>
                                <td>
                                    <strong>Transaction ID</strong>
                                </td>
                                <td>
                                    <span class="hex" id="tx-hex2">{{ tx_hex }}</span>
                                    <div class="copy-btn" onclick="copyText('tx-hex2')">
                                        <span class="tooltiptext">Copy to clipboard</span>
                                    </div>
                                </td>
                            </tr>
                            {% for entry in token_entries %}
                                <tr>
                                    <td>
                                        <strong>
                                            {% match entry.genesis_info %}
                                                {% when Some with (genesis_info) %}
                                                {{ genesis_info.token_ticker|string_from_lossy_utf8 }}
                                                {% when None %}
                                                Unknown
                                            {% endmatch %}
                                            Token ID
                                        </strong>
                                    </td>
                                    <td>
                                        <span class="hex" id="token-hex">{{ entry.token_hex }}</span>
                                        <div class="copy-btn" onclick="copyText('token-hex')">
                                            <span class="tooltiptext">Copy to clipboard</span>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td class="no-padding">
                                    <strong>Transaction ID</strong>
                                </td>
                                <td class="no-padding align-copy">
                                    <span class="hex" id="tx-hex">{{ tx_hex }}</span>
                                    <div class="copy-btn" onclick="copyText('tx-hex')">
                                        <span class="tooltiptext">Copy to clipboard</span>
                                    </div>
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
            <div id="advanced" class="ui styled fluid accordion">
                <div class="title">
                    <i class="dropdown icon"></i>
                    <span class="non-selectable">Advanced transaction data</span>
                </div>
                <div class="content">
                    <table class="ui very basic collapsing celled table">
                        <tbody>
                            <tr>
                                <td>Raw Transaction Hex</td>
                                <td>
                                    <div class="hex">{{ raw_tx }}</div>
                                </td>
                            </tr>
                            <tr>
                                <td>Locktime</td>
                                <td>{{ tx.lock_time|to_i128|render_integer|safe }}</td>
                            </tr>
                            <tr>
                                <td>Version</td>
                                <td>
                                    <div class="hex">{{ tx.version }}</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <h2>General Details</h2>
            <div class="tx-details-ctn">
                <div class="tx-details-half">
                    <div class="tx-details-row">
                        <div>Age</div>
                        <div>{{ timestamp|human_time }}</div>
                    </div>
                    <div class="tx-details-row">
                        <div>Block</div>
                        <div>
                            {% match tx.block %}
                                {% when Some with (block_meta) %}
                                <a href="/block/{{ block_meta.hash|to_le_hex }}">{{ block_meta.height|to_i128|render_integer|safe }}</a>
                                ({{ confirmations|to_i128|render_integer|safe }}
                                {% if confirmations|to_i128 > 1 %}
                                    blocks ago)
                                {% else %}
                                    block ago)
                                {% endif %}
                                {% when None %}
                                Not mined yet
                            {% endmatch %}
                        </div>
                    </div>
                    <div class="tx-details-row">
                        <div>Unix Timestamp</div>
                        <div>
                            {% match tx.block %}
                                {% when Some with (block_meta) %}
                                {{ block_meta.timestamp|to_i128|render_integer|safe }}
                                {% when None %}
                                Not mined yet
                            {% endmatch %}
                        </div>
                    </div>
                    <div class="tx-details-row">
                        <div>Size</div>
                        <div>
                            {{ tx.size|u32_to_u64|render_human_size }}
                            ({{ tx.size|to_i128|render_integer_smallify|safe }} B)
                        </div>
                    </div>
                </div>
                <div class="tx-details-half">
                    <div class="tx-details-row">
                        <div>Mined On</div>
                        {% match tx.block %}
                            {% when Some with (block_meta) %}
                            <div class="moment__timestamp" data-timestamp="{{ block_meta.timestamp }}">
                            </div>
                            {% when None %}
                            <div>Not mined yet</div>
                        {% endmatch %}
                    </div>
                    <div class="tx-details-row">
                        <div>Total Input</div>
                        <div>{{ sats_input|render_sats|safe }} XEC</div>
                    </div>
                    <div class="tx-details-row">
                        <div>Total Output</div>
                        <div>{{ sats_output|render_sats|safe }} XEC</div>
                    </div>
                    <div class="tx-details-row">
                        <div>Fee</div>
                        <div>
                            {{ (sats_input - sats_output)|max(0) |render_sats|safe }}
                            XEC
                        </div>
                    </div>
                </div>
            </div>
            {% for entry in token_entries %}
                {% call token_info_table::render(
                tx,
                entry.token_hex,
                entry.genesis_info,
                entry.entry,
                entry.token_input,
                entry.token_output,
                entry.token_type,
                entry.action_str,
                entry.specification,
                token_icon_url) %}
            {% endfor %}
            <div class="ui grid">
                <div class="ten wide column">
                    <h2>Transaction</h2>
                </div>
            </div>
            <div class="input-output-ctn">
                <div class="input-output-row">
                    <div class="input-ctn">
                        <div class="input-ctn-inner">
                            <h4>Inputs ({{ tx.inputs.len() }})</h4>
                            <div class="time-icons-ctn">
                                <div id="tx_date">{{ timestamp }}</div>
                                <div class="time-icon hide-time-icon" id="pre_xec">
                                    <img src="/assets/pre-ecash-icon.png" />
                                    <span>Pre-XEC
                                        <br />
                                    (Nov 15, 2020)</span>
                                </div>
                                <div class="time-icon hide-time-icon" id="five_years">
                                    <img src="/assets/five-years-icon.png" />
                                    <span>Over Five
                                        <br />
                                    Years Old</span>
                                </div>
                                <div class="time-icon hide-time-icon" id="pre_bch">
                                    <img src="/assets/pre-bch-icon.png" />
                                    <span>Pre-BCH
                                        <br />
                                    (Aug 8, 2017)</span>
                                </div>
                            </div>
                        </div>
                        <div id="inputs">
                            {% for input in tx.inputs %}
                                {% call input::render(
                                loop.index0,
                                input,
                                tx,
                                sats_addr_prefix,
                                tokens_addr_prefix,
                                token_icon_url) %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="input-output-arrow">
                        <img src="/assets/arrow.png" />
                    </div>
                    <div class="output-ctn">
                        <h4>Outputs ({{ tx.outputs.len() }})</h4>
                        <div id="outputs">
                            {% for output in tx.outputs %}
                                {% call output::render(
                                loop.index0,
                                output,
                                tx,
                                sats_addr_prefix,
                                tokens_addr_prefix,
                                token_icon_url) %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/code/timestamps.js?hash=80d7735"></script>
    <script type="text/javascript">
        const toggleBtn = document.getElementById('toggle-advanced');
        let advancedMode = localStorage.getItem('advanced');

        const enableAdvanced = () => {
            $('.advanced-toggle').toggle();
            $('#showhash').toggleClass('switch');
            $('#toggle-advanced').toggleClass('toggle_btn-switch');
            toggleTransactionScriptData();
            localStorage.setItem('advanced', 'enabled');
        };

        const disableAdvanced = () => {
            $('.advanced-toggle').toggle();
            $('#showhash').toggleClass('switch');
            $('#toggle-advanced').toggleClass('toggle_btn-switch');
            toggleTransactionScriptData();
            localStorage.setItem('advanced', 'disabled');
        };

        if (advancedMode === 'enabled') {
            enableAdvanced();
        }

        toggleBtn.addEventListener('click', e => {
            advancedMode = localStorage.getItem('advanced');
            if (advancedMode === 'disabled') {
                enableAdvanced();
            } else {
                disableAdvanced();
            }
        });
    </script>
    <script type="text/javascript">
        var xec = document.getElementById('pre_xec');
        var bch = document.getElementById('pre_bch');
        var five = document.getElementById('five_years');
        var txDateObject = document.getElementById('tx_date').textContent;
        var txDate = new Date(txDateObject).getTime() / 1000;
        var today = Date.now() / 1000;
        var xecDate = 1605441600;
        var bchDate = 1502193600;
        var fiveYearsAgo = today - 157800000;
        const checkXecDate = () => {
            if (txDate < xecDate) {
                xec.classList.remove('hide-time-icon');
            } else return;
        };
        const checkBchDate = () => {
            if (txDate < bchDate) {
                bch.classList.remove('hide-time-icon');
            } else return;
        };
        const checkFiveYearDate = () => {
            if (txDate < fiveYearsAgo) {
                five.classList.remove('hide-time-icon');
            } else return;
        };
        checkXecDate();
        checkBchDate();
        checkFiveYearDate();
    </script>
    <script type="text/javascript">
        $('.ui.accordion').accordion();
    </script>
{% endblock %}
